<template>
  <div class='chart5'>
    <chart :option='barOptions3' />
  </div>
  <div class='chart5'>
    <chart :option='ringOption' />
  </div>
</template>

<script setup>

const commonConfig = {
  color: ['#016EFF'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      shadowStyle: {
        color: "rgba(234,236,239,.4)"
      }
    },
    triggerOn: 'click',
    formatter: function (params) {
      return params[0].name + ':\n' + params[0].value;
    }
  },
  legend: {
    icon: 'circle',
    itemWidth: 10,
    itemHeight: 10,
    top: '20',
    selectedMode: false // 禁止点击
  },
}


const barOptions3 = {
  ...commonConfig,
  grid: {
    left: '7%',
    right: '1%',
    bottom: '3%',
    containLabel: true
  },
  legend: {
    top: '4%',
    icon: 'circle',
    itemHeight: 6
  },
  xAxis: [
    {
      type: 'category',
      data: ["2024-01", "2024-02",  "2024-03"],
      splitLine: {
        show: true,
        lineStyle: {
          // color: '#DCDEE1',
          type: 'dashed'
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          // color: '#DCDEE1',
          type: 'solid'
        }
      },
      axisTick: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      name: '数量(项)',
      nameTextStyle: {
        align: "right"
      },
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          // color: '#DCDEE1',
          type: 'dashed'
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          // color: '#DCDEE1',
          type: 'solid'
        }
      },
      axisTick: {
        show: false
      }
    }
  ],
  series: [
    {
      name: '销量',
      type: 'bar',
      barWidth: '10',
      data: [11, 22, 14],
    }
  ]
}

const ringOption = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['60%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 11, name: 'Search Engine' },
        { value: 11, name: 'Direct' },
        { value: 11, name: 'Email' },
        { value: 22, name: 'Union Ads' },
        { value: 44, name: 'Video Ads' }
      ]
    }
  ]
};

</script>

<style scoped>
.chart5 {
  width: 300px;
  height: 300px;
  margin-bottom: 100px;
}
</style>
